<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
		<title>CSS3隐藏鼠标点击后显示搜索响应式伸缩搜索框 - 代码笔记 www.198zone.com</title>
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>
		<div class="container">
			<header>
				<div style="width:960px;margin:10px auto; clear:both; text-align:center;  ">
<script src="http://www.198zone.com/statics/js/ad/96090.js" type="text/javascript"></script>
</div> 
			</header>
			<div class="main clearfix">
				<!-- Optional columns for small components -->
				<div class="column">
					<p>请点击下桔黄色的搜索图标按钮</p>
				</div>
				<div class="column">
					<div id="sb-search" class="sb-search">
						<form>
							<input class="sb-search-input" placeholder="请输入您的关键字..." type="text" value="" name="search" id="search">
							<input class="sb-search-submit" type="submit" value="">
							<span class="sb-icon-search"></span>
						</form>
					</div>
				</div>
			</div>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script src="js/uisearch.js"></script>
		<script>
			new UISearch( document.getElementById( 'sb-search' ) );
		</script>
<!--以下无正文 转载或者使用请注释出自代码笔记-->

<div style="width:960px;margin:20px auto; clear:both; text-align:center; font-size:12px; line-height:25px;    ">
<a href="http://www.198zone.com"  style="color:#333"><strong>代码笔记整理</strong></a> </strong>
 转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。
<br>
关注更多代码笔记更新 请加入代码笔记交流群 ： <strong>8019996</strong> <a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=f19215a1ef0ab2c1d1c163df664fa1bf875bb0f30042403192309b5e0a2c22de"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="代码笔记资源分享群①" title="代码笔记资源分享群①"></a>
<script src="http://www.198zone.com/statics/js/inc_share.js"  type="text/javascript"></script>
<script src="http://www.198zone.com/statics/js/inc_statistics.js"  type="text/javascript"></script>
<script src="http://www.198zone.com/statics/js/inc_monitor.js"  type="text/javascript"></script> 
</div>
<!--以上无正文 转载或者使用请注释出自代码笔记-->
	</body>
</html>
